<template>
  <div :class="containerClass">
    <div>
      <h3 class="text-22">{{ data.comment.title }}</h3>
      <div
        class="flex items-center gap-20 pb-18 pt-14 opacity-70"
        border-b="1px solid #CCC"
        dark:border-b="1px solid #404040"
      >
        <div>作者: {{ data.authorName }}</div>
        <div>发布于: {{ formatDateTime(data.comment.time) }}</div>
        <div class="rounded-20 bg-gray-200 px-8 py-1">{{ data.comment.language }}</div>
      </div>
    </div>
    <div class="overflow-x-auto pt-20">
      <div v-html="data.comment.content"></div>
    </div>
  </div>
</template>
<script setup>
import api from '@/api/user'
import { formatDateTime } from '@/utils'

const props = defineProps({
  commentId: {
    type: [String, Number],
    required: true,
  },
  containerClass: {
    type: String,
    default: '',
  },
})
const data = reactive({
  authorName: '',
  comment: {},
})

const fetchData = async () => {
  try {
    const authorData = await api.getProCommentAuthorById({
      id: props.commentId,
    })
    data.authorName = authorData.data.name
  } catch (err) {
    console.log(err)
  }
  try {
    const commentData = await api.viewProblemCommentDetailById({
      id: props.commentId,
    })

    data.comment = commentData.data
  } catch (err) {
    console.log(err)
  }
}

fetchData()
</script>
